<html lang="en">

<head>
  <meta charset="utf-8">
  <title>SDVOS</title>
  <!-- <link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Abel&display=swap" rel="stylesheet"> -->

  <link rel="stylesheet" href="static/styles.css">
  <link rel="stylesheet" href="static/overview.css">
  <link rel="stylesheet" href="static/codemirror.css">
  <link rel="stylesheet" href="static/codemirrorconfig/idea.css">
  <script src="static/codemirror.js"></script>
  <script src="static/codemirrorconfig/active-line.js"></script>
  <script src="static/codemirrorconfig/matchbrackets.js"></script>
  <script src="static/codemirrorconfig/python.js"></script>
  <!-- 引入show-hint 和 python-hint -->
  <link rel="stylesheet" href="static/codemirrorconfig/show-hint.css">
  <script src="static/codemirrorconfig/show-hint.js"></script>
  <script src="static/codemirrorconfig/python-hint.js"></script>

  <link rel="stylesheet" href="static/xterm.min.css"/>
  <script src="static/xterm.min.js"></script>

  <style>
    body {
      background: #E5E5E5;
    }
    .CodeMirror {
      font-family: monospace;
      font-size: 25px;
      }
    .loadingbg {
      width: 200px;
      height: 200px;
      position: absolute;
      background: rgba(0, 0, 0, 0.15);
      left: 50%;
      top: 50%;
    }
    .loading {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: rotate 1.5s linear infinite;
      position: absolute;
      left: 21%;
      top: 21%;
    }
    @keyframes rotate {
      to {
        transform: rotate(360deg);
      }
    }
    .circle {
       /* 注：使用 document.querySelector('.circle').getTotalLength() 可以得到圆一圈大小约为345 */
      stroke-dasharray: 345;
      stroke-dashoffset: 172;
    }
  </style>

</head>

<body>
  <div class=e102_1338>
    <div class=e102_1340>
      <div class="e102_1341"></div>
      <div class=e102_1385>
        <div class=e102_1386>
          <div class=e102_1387>
            <div class=ei102_1387_102_3532>
              <div class=ei102_1387_102_3532_102_3460>
                <div class=ei102_1387_102_3532_102_3462 id="dot1">

                </div>
                <div class=ei102_1387_102_3532_102_3464 id="dot1right">
                  
                </div>
              </div>
              <div class=ei102_1387_102_3532_102_3466><span class="ei102_1387_102_3532_102_3466_102_3493">Upload</span>
              </div>
            </div>
            <div class=ei102_1387_102_3533>
              <div class=ei102_1387_102_3533_102_3451>
                <div class=ei102_1387_102_3533_102_3452 id="dot2left">
                  
                </div>
                <div class=ei102_1387_102_3533_102_3454 id="dot2">

                </div>
                <div class=ei102_1387_102_3533_102_3456 id="dot2right">
                  
                </div>
              </div>
              <div class=ei102_1387_102_3533_102_3458><span class="ei102_1387_102_3533_102_3458_102_3493">Compile</span>
              </div>
            </div>
            <div class=ei102_1387_102_3534>
              <div class=ei102_1387_102_3534_102_3442>
                <div class=ei102_1387_102_3534_102_3443 id="dot3left">
                  
                </div>
                <div class=ei102_1387_102_3534_102_3445 id="dot3">
                  

                </div>
                <div class=ei102_1387_102_3534_102_3447 id="dot3right">
                  
                </div>
              </div>
              <div class=ei102_1387_102_3534_102_3449><span class="ei102_1387_102_3534_102_3449_102_3495">Test</span>
              </div>
            </div>
            <div class=ei102_1387_102_3535>
              <div class=ei102_1387_102_3535_102_3476>
                <div class=ei102_1387_102_3535_102_3477 id="dot4left">
                 
                </div>
                <div class=ei102_1387_102_3535_102_3479 id="dot4">
                  

                </div>
              </div>
              <div class=ei102_1387_102_3535_102_3482><span class="ei102_1387_102_3535_102_3482_102_3493">Deploy</span>
              </div>
            </div>
          </div>
        </div>
        <div class="e102_1388"></div>
        <div class="e102_1388r"></div>
        <span class="e102_1390" id="taketime">0.35s</span><span class="e102_1391">DEVOPS</span>
      </div><span class="e102_1392">SDV.OS</span>
    </div>
    <div class=e102_1342>
      <div class="e102_1343"></div>
      <div class="e102_1346"></div>
      <div class="e102_1349"></div>
      <div class="e102_1349_r" id="code">
        
      </div>
      <a href="javascript:void(0);"  onclick="runCode()" class=e126_1376>
        <div class="e126_1377" ></div><span class="e126_1378">Run</span>
        <div class="e126_1379"></div>
        <div class="e126_1373"></div>
      </a>
      <a href="javascript:void(0);" onclick="resetCode()" class=e126_1395>
        <div class="e126_1396"></div><span class="e126_1397">Reset</span>
        <div class="e126_1398"></div>
        <div class="e126_1399"></div>
      </a>
      <a href="javascript:void(0);" onclick="clearCode()" class=e126_1400>
        <div class="e126_1401" ></div><span class="e126_1402">Clear</span>
        <div class="e126_1403"></div>
        <div class="e126_1404"></div>
      </a>
      <a href="javascript:void(0);" onclick="showDemoCode()" class=e126_1405>
        <div class="e126_1406"></div><span class="e126_1407">Demo</span>
        <div class="e126_1408"></div>
        <div class="e126_1409"></div>
      </a>
      <div class="e102_1365"></div>
      <div class="e102_1366"></div>
      <div class="e102_1367" id="terminal"></div>
      <span
        class="e102_1368">Terminal：Local </span>
      <div class="e102_1369"></div>
      <div class="e102_1372"></div>
      <div class="e102_1373"></div>
      <div class="e102_1374"></div>
      <div class=e126_1410><span class="e126_1411">main.py</span>
        <div class="e126_1412"></div><span class="e126_1413">P</span>
      </div>
      <div class="e212_1393" id="demoBox" style="display: none;">
        <div class="e212_1382" >
          <div class="e212_1394" style="top: 5px;" onclick="showDemo1()">
            <span class="ei212_1382_203_68">DEMO1: Rain</span>
            <span class="ei212_1382_203_69">There are a lot of things you can do in space, and space essentially is unlimited resources.</span>
          </div>
          <div class="e212_1394" onclick="showDemo2()">
            <span class="ei212_1382_203_68">DEMO2: Comfortable Entry</span>
            <span class="ei212_1382_203_69">There are a lot of things you can do in space, and space essentially is unlimited resources.</span>
          </div>
          <div class="e212_1394" style="top: 146px;" onclick="showDemo3()">
            <span class="ei212_1382_203_68">DEMO3: All Functions</span>
            <span class="ei212_1382_203_69">There are a lot of things you can do in space, and space essentially is unlimited resources.</span>
          </div>
        <div class="ei212_1382_203_70"></div>
        </div>
      </div>
    </div>

    <div class=e102_1377>
      <div class=e102_1378><span class="e102_1379">Vehicle Signal Specification</span>
        <div class=e102_1380>
          <div class=e102_1381><input class="ei102_1381_324_1035" placeholder="Search Anything" id="input1"></input></div>
          <a href="javascript:void(0);" class=e102_1382 onclick="searchVSS()">
            <div class=ei102_1382_313_383>

            </div>
          </a>
          <a href="javascript:void(0);" class=e102_1383 onclick="clearSearch()">
            <div class=e102_1384>
              <div class=ei102_1384_313_385>

              </div>
            </div>
          </a>
        </div>
      </div>

      <div class="e102_1376_parent">
        <a href="javascript:void(0);"  class="e102_1376">
          <div class="v102_1431" ></div>
          <div class="v102_1432" ></div><span class="v102_1433">Cabin.Door.Row1.Left.IsOpen
            vehicle</span>
          <div class="v102_1435" ></div>
          <div class="v102_1435_type actuator_color">ACTUATOR</div>
          <div class="v102_1435_arrow"></div>
        </a>
        <a href="javascript:void(0);"  class="e102_1376">
          <div class="v102_1431" ></div>
          <div class="v102_1432" ></div><span class="v102_1433">Cabin.Door.Row1.Left.IsLocked
            vehicle</span>
          <div class="v102_1435" ></div>
          <div class="v102_1435_type actuator_color">ACTUATOR</div>
          <div class="v102_1435_arrow"></div>
        </a>
        <a href="javascript:void(0);"  class="e102_1376">
          <div class="v102_1431" ></div>
          <div class="v102_1432" ></div><span class="v102_1433">Cabin.Seat.Row1.Pos1.Position
            vehicle</span>
          <div class="v102_1435" ></div>
          <div class="v102_1435_type actuator_color">ACTUATOR</div>
          <div class="v102_1435_arrow"></div>
        </a>
        <a href="javascript:void(0);"  class="e102_1376">
          <div class="v102_1431" ></div>
          <div class="v102_1432" ></div><span class="v102_1433">Cabin.Seat.Row1.Pos1.Height
            vehicle</span>
          <div class="v102_1435" ></div>
          <div class="v102_1435_type actuator_color">ACTUATOR</div>
          <div class="v102_1435_arrow"></div>
        </a>
        <a href="javascript:void(0);"  class="e102_1376">
          <div class="v102_1431" ></div>
          <div class="v102_1432" ></div><span class="v102_1433">Cabin.Seat.Row1.Pos1.Backrest.Recline
            vehicle</span>
          <div class="v102_1435" ></div>
          <div class="v102_1435_type actuator_color">ACTUATOR</div>
          <div class="v102_1435_arrow"></div>
        </a>
        <a href="javascript:void(0);"  class="e102_1376">
          <div class="v102_1431" ></div>
          <div class="v102_1432" ></div><span class="v102_1433">Cabin.Lights.AmbientLight
            vehicle</span>
          <div class="v102_1435" ></div>
          <div class="v102_1435_type sensor_color">SENSOR</div>
          <div class="v102_1435_arrow"></div>
        </a>
        <a href="javascript:void(0);"  class="e102_1376">
          <div class="v102_1431" ></div>
          <div class="v102_1432" ></div><span class="v102_1433">Cabin.Lights.IsDomeOn
            vehicle</span>
          <div class="v102_1435" ></div>
          <div class="v102_1435_type actuator_color">ACTUATOR</div>
          <div class="v102_1435_arrow"></div>
        </a>
        <a href="javascript:void(0);"  class="e102_1376">
          <div class="v102_1431" ></div>
          <div class="v102_1432" ></div><span class="v102_1433">Body.Lights.Running.IsOn
            vehicle</span>
          <div class="v102_1435" ></div>
          <div class="v102_1435_type actuator_color">ACTUATOR</div>
          <div class="v102_1435_arrow"></div>
        </a>
        <a href="javascript:void(0);"  class="e102_1376">
          <div class="v102_1431" ></div>
          <div class="v102_1432" ></div><span class="v102_1433">Body.Lights.Brake.IsActive
            vehicle</span>
          <div class="v102_1435" ></div>
          <div class="v102_1435_type actuator_color">ACTUATOR</div>
          <div class="v102_1435_arrow"></div>
        </a>
        <a href="javascript:void(0);"  class="e102_1376">
          <div class="v102_1431" ></div>
          <div class="v102_1432" ></div><span class="v102_1433">Body.Windshield.Front.Wiping.Mode
            vehicle</span>
          <div class="v102_1435" ></div>
          <div class="v102_1435_type actuator_color">ACTUATOR</div>
          <div class="v102_1435_arrow"></div>
        </a>
      <a href="javascript:void(0);"  class="e102_1376">
        <div class="v102_1431" ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Cabin.Door
          vehicle</span>
        <div class="v102_1435" ></div>
        <div class="v102_1435_type branch_color">BRANCH</div>
        <div class="v102_1435_arrow"></div>
      </a>
      <a href="javascript:void(0);"  class="e102_1376">
        <div class="v102_1431" ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Cabin.Seat
          vehicle</span>
        <div class="v102_1435" ></div>
        <div class="v102_1435_type actuator_color">ACTUATOR</div>
        <div class="v102_1435_arrow"></div>
      </a>
      <a href="javascript:void(0);"  class="e102_1376">
        <div class="v102_1431" id="light" ></div>
        <div class="v102_1432" id="light_circle"></div><span class="v102_1433">Cabin.Lights.AmbientLight 
          vehicle</span>
        <div class="v102_1435" id="light_png"></div>
        <div class="v102_1435_type sensor_color">SENSOR</div>
        <div class="v102_1435_arrow"></div>
      </a>
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Body.Lights
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type actuator_color">ACTUATOR</div>
        <div class="v102_1435_arrow"></div>
      </a> 
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Body.Lights.IsBrakeOn
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type actuator_color">ACTUATOR</div>
        <div class="v102_1435_arrow"></div>
      </a>
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Body.Mirrors.Left
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type branch_color">BRANCH</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Body.Mirrors.Left.Pan
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type actuator_color">ACTUATOR</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Body.Trunk.Front.IsOpen
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type actuator_color">ACTUATOR</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Body.Windshield.Rear.Wiping
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type actuator_color">ACTUATOR</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Cabin.HVAC.AmbientAirTemperature
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type branch_color">BRANCH</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Cabin.HVAC.Station
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type sensor_color">SENSOR</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Cabin.Infotainment
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type actuator_color">ACTUATOR</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Cabin.Infotainment.Media.Played
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type sensor_color">SENSOR</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Chassis.Accelerator
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type sensor_color">SENSOR</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Connectivity.IsConnectivityAvailable
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type actuator_color">ACTUATOR</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">OBD.AbsoluteLoad
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type branch_color">BRANCH</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Powertrain.AccumulatedBrakingEnergy
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type actuator_color">ACTUATOR</div>
        <div class="v102_1435_arrow"></div>
      </a>  
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Powertrain.CombustionEngine.Compression
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type sensor_color">SENSOR</div>
        <div class="v102_1435_arrow"></div>
      </a> 
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Powertrain.Transmission.ClutchWear
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type actuator_color">ACTUATOR</div>
        <div class="v102_1435_arrow"></div>
      </a> 
      <a href="javascript:void(0);" class="e102_1376">
        <div class="v102_1431"  ></div>
        <div class="v102_1432" ></div><span class="v102_1433">Vehicle.Speed
          vehicle</span>
        <div class="v102_1435"></div>
        <div class="v102_1435_type actuator_color">ACTUATOR</div>
        <div class="v102_1435_arrow"></div>
      </a> 
    </div>

      <div class="v126_1356">
        <div class="v102_1426"></div><span class="v126_1359">Overview</span>
        <div id="desc" class="v126_1360"><div>demo</div><div class="overflow-auto pb-2" id="vspec" style="display: none;">
          <table class="h-full table-auto w-full mt-1" >
              <tbody>
                  <tr>
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top" colspan="2">VSS Specification</td>
                  </tr>
                  <tr class="hover:bg-blue-50">
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top text-aiot-green">Description</td>
                      <td class="px-4 py-1 align-top" id="vspecdesc">All doors, including windows and switches.</td>
                  </tr>
                  <tr class="hover:bg-blue-50">
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top text-aiot-green">Type</td>
                      <td class="px-4 py-1 align-top">branch</td>
                  </tr>
                  <tr class="hover:bg-blue-50">
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top text-aiot-green">UUID</td>
                      <td class="px-4 py-1 align-top">fd7f4d16f8965419a9a69fd66b40c1d7</td>
                  </tr>
                  <tr class="hover:bg-blue-50">
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top text-aiot-green">Source</td>
                      <td class="px-4 py-1 align-top"><a
                              href="https://github.com/COVESA/vehicle_signal_specification/tree/master/spec" target="_blank"
                              rel="noreferrer">https://github.com/COVESA/vehicle_signal_specification/tree/master/spec</a>
                      </td>
                  </tr>
                  <tr>
                      <td colspan="2">
                          <div class="bg-gray-300 w-full my-2" style="height: 1px;"></div>
                      </td>
                  </tr>
                  <tr>
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top" colspan="2">Dependencies</td>
                  </tr>
                  <tr class="hover:bg-blue-50">
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top text-aiot-green">Used by these vehicle apps
                      </td>
                      <td class="px-4 py-1 align-top"></td>
                  </tr>
                  <tr>
                      <td colspan="2">
                          <div class="bg-gray-300 w-full my-2" style="height: 1px;"></div>
                      </td>
                  </tr>
                  <tr>
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top" colspan="2">Implementation</td>
                  </tr>
                  <tr class="hover:bg-blue-50">
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top text-aiot-green">Implementation Status</td>
                      <td class="px-4 py-1 align-top">HW Prototype</td>
                  </tr>
                  <tr class="hover:bg-blue-50">
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top text-aiot-green">API Lifecycle Status</td>
                      <td class="px-4 py-1 align-top">Committed: Server implementation has been committed for next release
                      </td>
                  </tr>
                  <tr class="hover:bg-blue-50">
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top text-aiot-green">API Standardization</td>
                      <td class="px-4 py-1 align-top">Proposed for standardization: Formal proposal to API standards
                          organization, e.g. COVESA</td>
                  </tr>
                  <tr class="hover:bg-blue-50">
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top text-aiot-green">API Visibility</td>
                      <td class="px-4 py-1 align-top">Open AppStore: This API is available to any vehicle AppStore developer
                      </td>
                  </tr>
                  <tr class="hover:bg-blue-50">
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top text-aiot-green">Supported Hardware</td>
                      <td class="px-4 py-1 align-top"></td>
                  </tr>
                  <tr class="hover:bg-blue-50">
                      <td class="pl-5 px-4 py-1 font-bold select-none align-top text-aiot-green">Key Stakeholders</td>
                      <td class="px-4 py-1 align-top"></td>
                  </tr>
              </tbody>
          </table></div>
        </div>
        
      </div>
      <div class=e102_1393>
        <div class="e102_1394"></div>
        <div class=e102_1395>
          <div class=ei102_1395_380_1385></div>
          <div class=ei102_1395_382_1606>
            <div class=ei102_1395_1105_4152><span class="ei102_1395_380_1338">SAMPLE VEHICLE - ETAS AE96</span></div>
            <span class="ei102_1395_1105_4001">1983 Sprinter Trueno</span>
          </div>
        </div>
        <div class=e102_1396>
          <div class=e102_1409_parent style="left: 16px; background: #164293;">
            <div class=e102_1409 >
              <div class="e102_1410"></div><span class="e102_1400">Hybrid</span><span class="e102_1401">2023</span>
              <div class="e102_1402"></div>
              <div class="e130_1414"></div>
            </div>
          </div>
          
          <div class=e102_1403>
            <div class="e102_1410"></div><span class="e102_1406">Diesel</span><span class="e102_1407">1983</span>
            <div class="e102_1408"></div>
            <div class="e126_1365"></div>
          </div>
          <div class=e102_1409_parent style="left: 355px;">
            <div class=e102_1409>
              <div class="e102_1410"></div><span class="e102_1412">V2X</span><span class="e102_1413">2000</span>
              <div class="e102_1402"></div>
              <div class="e131_1415"></div>
            </div>
          </div>
          
          <div class=e102_1409_parent style="left: 523px;">
            <div class=e102_1409>
              <div class="e102_1410"></div><span class="e102_1412">V2X</span><span class="e102_1413">2000</span>
              <div class="e102_1402"></div>
              <div class="e131_1415"></div>
            </div>
          </div>
          
          <div class=e102_1409_parent style="left: 691px;">
            <div class=e102_1409 >
              <div class="e102_1410"></div><span class="e102_1412">V2X</span><span class="e102_1413">2000</span>
              <div class="e102_1402"></div>
              <div class="e131_1415"></div>
            </div>
          </div>
          
          <div class=e102_1409_parent style="left: 859px;">
            <div class=e102_1409 >
              <div class="e102_1410"></div><span class="e102_1412">V2X</span><span class="e102_1413">2000</span>
              <div class="e102_1402"></div>
              <div class="e131_1415"></div>
            </div>
          </div>
          
          <div class=e102_1409_parent style="left: 1027px;">
            <div class=e102_1409 >
              <div class="e102_1410"></div><span class="e102_1412">V2X</span><span class="e102_1413">2000</span>
              <div class="e102_1402"></div>
              <div class="e131_1415"></div>
            </div>
          </div>
          
          <div class=e102_1409_parent style="left: 1195px;">
            <div class=e102_1409 >
              <div class="e102_1410"></div><span class="e102_1412">V2X</span><span class="e102_1413">2000</span>
              <div class="e102_1402"></div>
              <div class="e131_1415"></div>
            </div>
          </div>
          
          <div class=e102_1409_parent style="left: 1363px;">
            <div class=e102_1409 >
              <div class="e102_1410"></div><span class="e102_1412">V2X</span><span class="e102_1413">2000</span>
              <div class="e102_1402"></div>
              <div class="e131_1415"></div>
            </div>
          </div>
          
          <div class=e102_1409_parent style="left: 1531px;">
            <div class=e102_1409 >
              <div class="e102_1410"></div><span class="e102_1412">V2X</span><span class="e102_1413">2000</span>
              <div class="e102_1402"></div>
              <div class="e131_1415"></div>
            </div>
          </div>
          
        </div>
        <div class="e102_1421"></div>
      </div>
    </div>
  </div>
   <div class="loadingbg" id="loadCircle" style="display: none;">
   <svg class="loading" >
    <circle class="circle" cx="60" cy="60" r="55" fill="transparent" stroke="#164293" stroke-linecap="round" stroke-width="10"></circle>
  </svg>
   </div>
</body>

<script type="text/javascript">
  var mockCode = "import asyncio\n"+
"import json\n"+
"import signal\n"+
"import logging\n"+
"\n"+
"from sdv.vdb.subscriptions import DataPointReply\n"+
"from sdv_model import vehicle1, vehicle2\n"+
"from sdv.vehicle_app import VehicleApp\n"+
"\n"+
"logging.basicConfig(level=logging.DEBUG)\n"+
"logging.getLogger().setLevel(\"DEBUG\")\n"+
"logger = logging.getLogger(__name__)\n"+
"\n"+
"class SampleApp(VehicleApp):\n"+
"    \"\"\"\n"+
"    Sample skeleton vehicle app.\n"+
"\n"+
"    The skeleton subscribes to a getSpeed MQTT topic\n"+
"    to listen for incoming requests to get\n"+
"    the current vehicle speed and publishes it to\n"+
"    a response topic.\n"+
"\n"+
"    It also subcribes to the VehicleDataBroker\n"+
"    directly for updates of the\n"+
"    Vehicle.Speed signal and publishes this\n"+
"    information via another specific MQTT topic\n"+
"    \"\"\"\n"+
"\n"+
"    def __init__(self, vehicle_client: vehicle1):\n"+
"        super().__init__()\n"+
"        self.Vehicle = vehicle_client\n"+
"        self._idx = 0 \n"+
"\n"+
"    async def on_start(self):\n"+
"        self.Vehicle.Speed.subscribe(self.on_speed_change)\n"+
"        logger.debug(\"On start ...\")\n"+
"        print(\"Mock up for mqtt\")\n"+
"        await self.publish_mqtt_event(\"sampleapp/bt_cmd/reponse\", json.dumps({\"3d_model_door\": \"open\"}),)\n"+
"        print(\"Mock up for VSS\")\n"+
"        #await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(90)\n"+
"        asyncio.create_task(self.on_timer())\n"+
"\n"+
"    async def on_timer(self):\n"+
"        logger.debug(\"TASK LOOP ...\")\n"+
"        logger.debug(\"task loopping ...\")\n"+
"        await self.publish_mqtt_event(\"sampleapp/tasks\", json.dumps({\"period tasks\": self._idx}),)\n"+
"        self._idx = self._idx + 1\n"+
"        #await asyncio.sleep(2.0)\n"+
"        await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)\n"+
"        #await asyncio.sleep(2.0)\n"+
"        #logger.debug(await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.get())\n"+
"        #await asyncio.sleep(1.0)\n"+
"\n"+
"        pass\n"+
"    async def on_speed_change(self, data: DataPointReply):\n"+
"        print(\"on speed change\")\n"+
"        pass\n"+
"\n"+
"\n"+
"async def main():\n"+
"    \"\"\"Main function\"\"\"\n"+
"    logger.info(\"Starting SampleApp...\")\n"+
"    vehicle_app = SampleApp(vehicle2)\n"+
"    await vehicle_app.run()\n"+
"\n"+
"LOOP = asyncio.get_event_loop()\n"+
"#LOOP.add_signal_handler(signal.SIGTERM, LOOP.stop)\n"+
"LOOP.run_until_complete(main())\n"+
"LOOP.close()\n"
  var orig = CodeMirror.hint.python;
  CodeMirror.hint.python = function(cm) {
    var inner = orig(cm) || {from: cm.getCursor(), to: cm.getCursor(), list: []};
    inner.list.push("Vehicle.Cabin.Door.Row1.Left.IsOpen.set(True)");
    inner.list.push("Vehicle.Cabin.Door.Row1.Left.IsLocked.set(True)");
    inner.list.push("Vehicle.Cabin.Seat.Row1.Pos1.Position.set(1)");
    inner.list.push("Vehicle.Cabin.Seat.Row1.Pos1.Height.set(1)");
    inner.list.push("Vehicle.Cabin.Seat.Row1.Pos1.Backrest.Recline.set(1)");
    inner.list.push("Vehicle.Cabin.Lights.AmbientLight.set(1)");
    inner.list.push("Vehicle.Cabin.Lights.IsDomeOn.set(True)");
    inner.list.push("Vehicle.Body.Lights.Running.IsOn.set(True)");
    inner.list.push("Vehicle.Body.Lights.Brake.IsActive.set(True)");
    inner.list.push("Vehicle.Body.Windshield.Front.Wiping.Mode.set('TRIGGER')");
    return inner;
  };
  var myCodeMirror = CodeMirror(document.getElementById('code'), {
      lineNumbers: true,     // 显示行数
      indentUnit: 4,         // 缩进单位为4
      styleActiveLine: true, // 当前行背景高亮
      //matchBrackets: true,   // 括号匹配
      mode: 'python',        // python
      lineWrapping: true,    // 自动换行
      theme: 'idea',         // 使用idea模版
      hintOptions: {
      completeSingle: false,
      alignWithWord: false,
      hint: CodeMirror.hint.python
      },
      value: mockCode
      });
  myCodeMirror.setSize('auto','682px');

  myCodeMirror.on('keypress', (instance) => {
    
    instance.showHint();
    
  })
  

  var term = new Terminal({
        //cursorStyle: 'underline', //光标样式
        cols: 92,
        rows: 7,
        fontSize: 20, // 字体大小
        letterSpacing: 0,
        fontFamily: `monospace`,
        scrollBar: true,
        cursorBlink: true, // 光标闪烁
        convertEol: true, //启用时，光标将设置为下一行的开头
        disableStdin: false, //是否应禁用输入。
        theme: {
            foreground: 'black', //字体
            background: 'rgba(238.00000101327896, 238.00000101327896, 240.00000089406967, 1)', //背景色
            cursor: 'help',//设置光标
        }
    });

  term.open(document.getElementById('terminal'));
  term.write('ready');

  async function runCode(){
      
      initPipe();
      runPipe();
      
      term.reset();

      term.writeln('upload...10%');
      await sleep(385);
      term.clear();
      term.writeln('upload...50%');
      await sleep(385);
      term.clear();
      term.writeln('upload...80%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');

      term.writeln('compile...10%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...30%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...60%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...90%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');

      term.writeln('test...10%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...30%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...60%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...90%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...100%');

      term.writeln('deploy...20%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...100%');
      term.writeln('deploy...60%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...100%');
      term.writeln('deploy...100%');


      var pythonCode = myCodeMirror.getValue();
      var xhr = new XMLHttpRequest();
      xhr.open('post', 'code');
      xhr.setRequestHeader('content-type', 'text/plain');
      xhr.send(pythonCode);

      if(pythonCode.indexOf('Left.IsOpen')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view to front...');
        await sleep(1000);
        term.writeln('[3D Model]bluetooth key detection...');
        await sleep(1000);
        term.writeln('[3D Model]set camera view beside door...');
        await sleep(1000);
        term.writeln('[3D Model]cabin door row1 leftHandle isTouched...');
        await sleep(1000);
        term.writeln('[3D Model]cabin door row1 left open...');
      } 
      if(pythonCode.indexOf('Left.IsLocked')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view beside door...');
        await sleep(1000);
        term.writeln('[3D Model]cabin door row1 leftHandle isTouched...');
        await sleep(1000);
        term.writeln('[3D Model]cabin door row1 left close...');
      } 
      if(pythonCode.indexOf('Pos1.Position')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view beside seat...');
        await sleep(1000);
        term.writeln('[3D Model]seat position move forward...');
        await sleep(1000);
        term.writeln('[3D Model]seat position move backward...');
      } 
      if(pythonCode.indexOf('Lights.AmbientLight')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view beside seat...');
        await sleep(1000);
        term.writeln('[3D Model]ambient light color turned yellow...');
        await sleep(1000);
        term.writeln('[3D Model]ambient light color turned red...');
        await sleep(1000);
        term.writeln('[3D Model]ambient light color turned green...');
        await sleep(1000);
        term.writeln('[3D Model]ambient light color turned blue...');
      }
      if(pythonCode.indexOf('Lights.IsDomeOn')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view beside seat...');
        await sleep(1000);
        term.writeln('[3D Model]demo light color turned on...');
        await sleep(1000);
        term.writeln('[3D Model]demo light color turned off...');
      }
      if(pythonCode.indexOf('Running.IsOn')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view front...');
        await sleep(1000);
        term.writeln('[3D Model]running light turned on...');
        await sleep(1000);
        term.writeln('[3D Model]running light turned off...');
      }
      if(pythonCode.indexOf('Brake.IsActive')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view behind...');
        await sleep(1000);
        term.writeln('[3D Model]Brake light turned on...');
        await sleep(1000);
        term.writeln('[3D Model]Brake light turned off...');
      }
      if(pythonCode.indexOf('Wiping.Mode')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view behind...');
        await sleep(1000);
        term.writeln('[3D Model]front wiper turned on...');
        await sleep(1000);
        term.writeln('[3D Model]front wiper turned off...');
      }
      xhr.onload = function() {
          term.writeln(xhr.response);
      }
      
  }

  function initPipe(){
    document.getElementById('dot1').classList.remove('dot_active');
    document.getElementById('dot2').classList.remove('dot_active');
    document.getElementById('dot3').classList.remove('dot_active');
    document.getElementById('dot4').classList.remove('dot_active');
    document.getElementById('dot1right').classList.remove('line_active');
    document.getElementById('dot2left').classList.remove('line_active');
    document.getElementById('dot2right').classList.remove('line_active');
    document.getElementById('dot3left').classList.remove('line_active');
    document.getElementById('dot3right').classList.remove('line_active');
    document.getElementById('dot4left').classList.remove('line_active');
  }

  async function runPipe(){
    var start = new Date().getTime();
    document.getElementById('loadCircle').style.display = 'block';
    await sleep(500);
    document.getElementById('dot1').classList.add('dot_active');
    await sleep(500);
    document.getElementById('dot1right').classList.add('line_active');
    await sleep(500);
    document.getElementById('dot2left').classList.add('line_active');
    await sleep(500);
    document.getElementById('dot2').classList.add('dot_active');
    await sleep(500);
    document.getElementById('dot2right').classList.add('line_active');
    await sleep(500);
    document.getElementById('dot3left').classList.add('line_active');
    await sleep(500);
    document.getElementById('dot3').classList.add('dot_active');
    await sleep(500);
    document.getElementById('dot3right').classList.add('line_active');
    await sleep(500);
    document.getElementById('dot4left').classList.add('line_active');
    await sleep(500);
    document.getElementById('dot4').classList.add('dot_active');
    var taketime = ((new Date().getTime() - start)/1000+Math.random()*3).toFixed(1);
    document.getElementById('taketime').innerText=taketime+'s';
    document.getElementById('loadCircle').style.display = 'none';
  }


  function sleep(time){
  return new Promise((resolve) => setTimeout(resolve, time));
  }
  
  function resetCode(){
    myCodeMirror.setValue(mockCode);
  }

  function clearCode(){
    myCodeMirror.setValue("");
  }

  document.getElementById('desc').childNodes[0].innerText="The overall goal of the Vehicle Signal Specification (VSS) is to create a common understanding of vehicle signals in order to reach a “common language” independent of the protocol or serialisation format."

  // VSS对应描述与代码
  sortVssAndBindClick();
  function sortVssAndBindClick(){
    var vss = document.getElementsByClassName('e102_1376');
    var startTop = 0;
    var interval = 84;
    for (var i = 0; i < vss.length; i++) {
      vss[i].style.top=startTop+interval*i;
      vss[i].addEventListener("click", function(){
        
        for (var i = 0; i < vss.length; i++) {
          vss[i].childNodes[1].style.background='#FFFFFF';
          vss[i].childNodes[3].style.background='#DEE0E2';
          vss[i].childNodes[6].style.backgroundImage = 'url(static/images/car.png)';
        }
        this.childNodes[1].style.background='#EEEEF0';
        this.childNodes[3].style.background='#164293';
        this.childNodes[6].style.backgroundImage = 'url(static/images/car2.png)';
        document.getElementById('desc').childNodes[0].innerText="";
        document.getElementById('vspecdesc').innerText=this.childNodes[4].innerText;
        document.getElementById('vspec').style.display = 'block';
        var finalCode = mockCode.replaceAll("Cabin.Seat.Row1.Pos1.Position",this.childNodes[4].innerText.split(" ")[0]);
        if(this.childNodes[4].innerText.split(" ")[0].indexOf('.Is')>-1){
          finalCode = finalCode.replaceAll('set(self._idx)','set(True)')
        }else if(this.childNodes[4].innerText.split(" ")[0].indexOf('Mode')>-1){
          finalCode = finalCode.replaceAll('set(self._idx)','set("INTERVAL")')
        }else{
          finalCode = finalCode.replaceAll('set(self._idx)','set(1)')
        }
        myCodeMirror.setValue(finalCode);
      });
    }   

  }

  function showDemoCode(){
    var demoPopBox = document.getElementById('demoBox');
    if(demoPopBox.style.display == 'block'){
      demoPopBox.style.display = 'none'
    }else{
      demoPopBox.style.display = 'block'
    }
  }


  function searchVSS(){
    var searchText = document.getElementById('input1').value;
    var vss = document.getElementsByClassName('e102_1376');
    var startTop = 0;
    var interval = 84;
    var matchedCount = 0;
    for (var i = 0; i < vss.length; i++) {
      new RegExp('oo', 'ig').test('Door')
      if(new RegExp(searchText, 'ig').test(vss[i].innerText)){
        vss[i].style.top=startTop+interval*matchedCount;
        matchedCount = matchedCount+1;
      }else{
        vss[i].setAttribute("hidden", true);
      }
    }
  }

  function clearSearch(){
    var vss = document.getElementsByClassName('e102_1376');
    var startTop = 0;
    var interval = 84;
    for (var i = 0; i < vss.length; i++) {
      vss[i].style.top=startTop+interval*i;
      vss[i].removeAttribute("hidden");
    }

  }

  var carList = document.querySelectorAll(".e102_1409_parent");
  
  for (i = 0; i < carList.length; i++) {
    carList[i].onclick = function(){
      for (i = 0; i < carList.length; i++){
        carList[i].style.background = "";
      }
      this.style.background = "#164293";
    }
  }

  var demoList = document.querySelectorAll(".e212_1394");

  var demo_rain = mockCode.replace("await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)",
           "await self.Vehicle.Body.Lights.Running.IsOn.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Body.Lights.Brake.IsActive.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Body.Windshield.Front.Wiping.Mode.set('TRIGGER')\n"
  );
  var demo_comfortable = mockCode.replace("await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)",
           "await self.Vehicle.Body.Lights.Running.IsOn.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Body.Lights.Brake.IsActive.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Door.Row1.Left.IsOpen.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(1)\n"
  +"        await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(-1)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(1)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(2)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(3)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(4)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(5)\n"
  );

  var demo_allFunction = mockCode.replace("await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)",
           "await self.Vehicle.Body.Lights.Running.IsOn.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Body.Lights.Brake.IsActive.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Body.Windshield.Front.Wiping.Mode.set('TRIGGER')\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Door.Row1.Left.IsOpen.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(1)\n"
  +"        await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(-1)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(1)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(2)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(3)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(4)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(5)\n"
  +"        await self.Vehicle.Cabin.Lights.IsDomeOn.set(True)\n"
  +"        await self.Vehicle.Cabin.Lights.IsDomeOn.set(False)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Door.Row1.Left.IsLocked.set(True)\n"
  );

  var demo_doorOpen = mockCode.replace("await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)",
           "await self.Vehicle.Cabin.Door.Row1.Left.IsOpen.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        for i in range(5):\n"         
  +"            await self.Vehicle.Body.Lights.Brake.IsActive.set(True)\n"
  +"            await self.Vehicle.Body.Lights.Brake.IsActive.set(False)\n"
  );

  var demo_findCar = mockCode.replace("await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)",
           "await self.Vehicle.Body.Windshield.Front.Wiping.Mode.set('TRIGGER')\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        for i in range(5):\n"         
  +"            await self.Vehicle.Body.Lights.Running.IsOn.set(True)\n"
  +"            await self.Vehicle.Body.Lights.Running.IsOn.set(False)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        for i in range(5):\n"         
  +"            await self.Vehicle.Body.Lights.Brake.IsActive.set(True)\n"
  +"            await self.Vehicle.Body.Lights.Brake.IsActive.set(False)\n"
  );
  
  for (i = 0; i < demoList.length; i++) {
    demoList[i].onclick = function(){
      for (i = 0; i < demoList.length; i++){
        demoList[i].style.background = "";
        demoList[i].childNodes[1].style.color="#828282";
        demoList[i].childNodes[3].style.color="#333333";
      }
      this.style.background = "#164293";
      this.childNodes[1].style.color="#FFFFFF";
      this.childNodes[3].style.color="#DBD7D7";
      
      if(this.innerText.indexOf('DEMO1')>-1){
        myCodeMirror.setValue(demo_rain);
      }
      if(this.innerText.indexOf('DEMO2')>-1){
        myCodeMirror.setValue(demo_comfortable);
      }
      if(this.innerText.indexOf('DEMO3')>-1){
        myCodeMirror.setValue(demo_allFunction);
      }
    }
  }
  
</script>
</html>